<template>
    <div class="detail-wrapper">
        <div class="nav-back" @click="goBack">
            <span><i class="el-icon-arrow-left"></i>返回</span>
        </div>
        <div class="detail-box">
            <el-tabs type="border-card">
                <el-tab-pane label="基础信息">
                    <div class="content">
                        <div class="title"><span>基础信息</span></div>
                        <div class="item">
                            <p><span class="txt">申请人：</span>{{dataInfo.name}}</p>
                            <p><span class="txt">联系电话：</span>{{dataInfo.phone}}</p>
                            <p><span class="txt">所属单位：</span>{{dataInfo.department}}</p>
                            <p><span class="txt">申请类型：</span>{{dataInfo.apply_type}}</p>
                            <p><span class="txt">申请人承诺日期：</span>{{dataInfo.user_promise_date}}</p>
                            <p>
                                <span class="txt">状态：</span>
                                <template v-if="dataInfo.status== 0">审核中</template>
                                <template v-if="dataInfo.status== 1">退回修改中</template>
                                <template v-if="dataInfo.status== 2">通过</template>
                            </p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="项目信息">
                    <div class="content" v-if="dataType == 'kecheng'">
                        <div class="title"><span>项目信息</span></div>
                        <div class="item">
                            <p><span class="txt">课程名称：</span>{{dataInfo.class_name}}</p>
                            <p><span class="txt">课程类型：</span>{{dataInfo.class_type}}</p>
                            <p><span class="txt">授课教师姓名：</span>{{dataInfo.teacher_name}}</p>
                            <p><span class="txt">学工号：</span>{{dataInfo.code}}</p>
                            <p><span class="txt">学生类型：</span>{{dataInfo.student_type}}</p>
                            <p><span class="txt">是否培训：</span>{{dataInfo.train ? '是': '否' }}</p>
                            <p><span class="txt">授课教师电话：</span>{{dataInfo.teacher_phone}}</p>
                            <p><span class="txt">授课教师账号：</span>{{dataInfo.teacher_account}}</p>
                            <p><span class="txt">授课教师意见：</span>{{dataInfo.teacher_remark}}</p>
                            <p><span class="txt">导师名字：</span>{{dataInfo.tutor_name}}</p>
                            <p><span class="txt">导师账号：</span>{{dataInfo.tutor_account}}</p>
                            <p><span class="txt">导师手机号：</span>{{dataInfo.tutor_phone}}</p>
                            <p><span class="txt">导师意见：</span>{{dataInfo.tutor_remark}}</p>
                            <p><span class="txt">导师审核时间：</span>{{dataInfo.tutor_date}}</p>
                            <p><span class="txt">论文选题：</span>{{dataInfo.paper_name}}</p>
                            <p><span class="txt">论文评估内容：</span>{{dataInfo.paper_content}}</p>
                            <p><span class="txt">授课教师审核时间：</span>{{dataInfo.teacher_date}}</p>
                        </div>
                    </div>
                    <div class="content" v-if="dataType == 'keyan'">
                        <div class="title"><span>项目信息</span></div>
                        <div class="item">
                            <p><span class="txt">项目名称：</span>{{dataInfo.project_name}}</p>
                            <p><span class="txt">项目负责人：</span>{{dataInfo.project_charge_name}}</p>
                            <p><span class="txt">项目负责人手机：</span>{{dataInfo.project_charge_phone}}</p>
                            <p><span class="txt">项目所在地址：</span>{{dataInfo.project_type}}</p>
                            <p><span class="txt">项目负责人账号：</span>{{dataInfo.project_charge_account}}</p>
                            <p><span class="txt">项目负责人意见：</span>{{dataInfo.project_charge_remark}}</p>
                            <p><span class="txt">项目负责人审核时间：</span>{{dataInfo.project_charge_date}}</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="实验场所信息">
                    <div class="content">
                        <div class="title"><span>实验场所信息</span></div>
                        <div class="item">
                            <p><span class="txt">实验场所负责人：</span>{{dataInfo.lab_charge_name}}</p>
                            <p><span class="txt">实验场所负责人联系电话：</span>{{dataInfo.lab_charge_phone}}</p>
                            <p><span class="txt">实验室负责人账号：</span>{{dataInfo.lab_charge_account}}</p>
                            <p><span class="txt">实验场所安全员：</span>{{dataInfo.lab_security_name}}</p>
                            <p><span class="txt">实验室安全员账号：</span>{{dataInfo.lab_security_account}}</p>
                            <p><span class="txt">实验场所安全员联系电话：</span>{{dataInfo.lab_security_phone}}</p>
                            <p><span class="txt">实验室安全员意见：</span>{{dataInfo.lab_security_remark}}</p>
                            <p><span class="txt">实验室安全员审核时间：</span>{{dataInfo.lab_security_date}}</p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="项目内容">
                    <div class="content">
                        <div class="title"><span>项目内容</span></div>
                        <div class="item">
                            <p style="width: 100%;"><span class="txt">处置条件：</span>{{dataInfo.deal_condition}}</p>
                            <p style="width: 100%;"><span class="txt">是否存在实验安全风险：</span>{{dataInfo.any_risk ? '是': '否'}}</p>
                            <div style="width: 100%;"><span class="txt" style="vertical-align: top;">实验方案：</span><p style="width:70%;display: inline-block;">{{dataInfo.content}}</p></div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="个人防护">
                    <div class="content">
                        <div class="title"><span>个人防护</span></div>
                        <div class="item">
                            <template v-for="(item,index) in protectList">
                                <span class="desc" :class="protectTool.indexOf(item.name) > -1 ? 'active':''" :key="index">{{ item.name }}</span>
                            </template>
                        </div>
                    </div>
                </el-tab-pane>
                <!-- <el-tab-pane label="安全用具">
                    <div class="content">
                        <div class="title"><span>安全用具</span></div>
                        <div class="item">
                            <template v-for="(item,index) in dealList">
                                <span class="desc" :class="dataInfo.protect_tool === item.name ? 'active':''" :key="index">{{ item.name }}</span>
                            </template>
                        </div>
                    </div>
                </el-tab-pane> -->
                <el-tab-pane label="事故类型">
                    <div class="content">
                        <div class="title"><span>事故类型</span></div>
                        <div class="item">
                            <template v-for="(item,index) in accidentList">
                                <span class="desc" :class="accident.indexOf(item.name) > -1 ? 'active':''" :key="index">{{ item.name }}</span>
                            </template>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="废弃物类型">
                    <div class="content">
                        <div class="title"><span>废弃物类型</span></div>
                        <div class="item">
                            <template v-for="(item,index) in trashList">
                                <span class="desc" :class="trashTool.indexOf(item.name) > -1? 'active':''" :key="index">{{ item.name }}</span>
                            </template>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
import mixin from '@/assets/js/mixin'
export default{
    mixins: [mixin],
    data() {
        return {
            dataType: '',
            loading: false,
            detailId: '',
            dataInfo: {},
            protectList: [],
            dealList: [],
            accidentList: [],
            trashList: [],
            protectTool: [],
            accident: [],
            trashTool: []
        }
    },
    created() {
        this.detailId = this.$route.query.id
        this.dataType = this.$route.query.type
        this.loading = true
        this.initData()
    },
    methods: {
        initData() {
            // 个人防护
            request({
                url: '/manager/configmag/protectQuery.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    name: this.name,
                    page: this.currentPage,
                    limit: 9999
                }
            }).then(res => {
                if(res.code == 200) {
                    this.protectList = res.data || []
                }
            })
            // 安全用具
            request({
                url: '/manager/configmag/dealQuery.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    name: this.name,
                    page: this.currentPage,
                    limit: 9999
                }
            }).then(res => {
                if(res.code == 200) {
                    this.dealList = res.data || []
                }
            })
            // 事故类型
            request({
                url: '/manager/configmag/accidentQuery.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    name: this.name,
                    page: this.currentPage,
                    limit: 9999
                }
            }).then(res => {
                if(res.code == 200) {
                    this.accidentList = res.data || []
                }
            })
            // 废弃物类型
            request({
                url: '/manager/configmag/trashQuery.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    name: this.name,
                    page: this.currentPage,
                    limit: 9999
                }
            }).then(res => {
                if(res.code == 200) {
                    this.trashList = res.data || []
                }
            })
            request({
                url: '/manager/business/businessInfo.jsp',
                method: 'post',
                data: {
                    txtAction: 'query',
                    id: this.detailId
                }
            }).then(res => {
                if(res.code == 200) {
                    // console.log(res,'dddddddd')
                    this.loading = false
                    this.dataInfo = res.data
                    this.protectTool = res.data.protect_tool.split(',')
                    this.accident = res.data.accident.split(',')
                    this.trashTool = res.data.trash.split(',')
                    console.log(this.protectTool,'protect_tool')
                } else {
                    this.$message.error(res.msg);
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.detail-wrapper{
    width: 100%;
    background: #fff;
    .detail-box{
        padding: 20px;
        /deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
            color: #106fc6;
        }
    }
    .content{
        margin: 25px 0;
        padding: 20px;
        line-height: 35px;
        background: #e1ebf7;
        .title{
            margin-bottom: 10px;
            span{
                padding-left: 10px;
                border-left: 5px solid #106fc6;
                font-size: 18px; 
                font-weight: 600;
            }
        }
        .item{
            padding: 20px;
            display: flex;
            // justify-content: space-between;
            flex-wrap: wrap;
            background: #fff;
            border-radius: 10px;
            p{
                width: 50%;
            }
            .t-info{
                color: #8a8a8a;
                font-weight: 600;
                text-align: right;
            }
            .txt{
                width: 200px;
                display: inline-block;
                color: #8a8a8a;
                font-weight: 600;
                text-align: right;
            }
            .desc{
                margin-bottom: 10px;
                margin-right: 20px;
                padding: 0 10px;
                border-radius: 5px;
                border: 1px solid #d5d5d5;
            }
            .active{
                color: #106fc6;
                border-color: #106fc6;
            }
        }
        
    }
}
</style>